import { useEffect } from "react";
import { Button, Space, Tooltip } from "antd";
import { DeleteOutlined, EditOutlined, InfoOutlined, LeftCircleOutlined } from "@ant-design/icons";
import { del, page, upt, batchDel, save } from "@/views/sys/dict/api";
import { useTableDialog } from "@/hooks/useTable";
import { useFormDialog } from "@/hooks/useForm";
import CloudTable from "@/component/CloudTable";
import FormModal from "@/component/FormModal";
import { getTenantId } from "@/utils/storage";

const DictDetail = ({ props = {} }) => {

    const { visible, row, isOpenDialog } = props;

    /**
     * 表单提交
     */
    const onDetailFormCallback = (model) => {
        model.tenantId = getTenantId();
        model.parentId = row?.id || 0;
        detailForm.onSubmit(model, detailTable.onReload);
    }

    // 表单列
    const detailItems = [
        {
            label: '类型',
            name: 'type',
            disabled: true,
        },
        {
            label: '名称',
            name: 'name',
            rules: [{ required: true, message: '请输入名称' }],
        },
        {
            label: '值',
            name: 'value',
            rules: [{ required: true, message: '请输入值' }],
        },
        {
            label: '排序',
            name: 'sort',
        },
        {
            label: '备注',
            name: 'remark',
        }
    ];

    // 表单操作
    const detailForm = useFormDialog({
        save: save,
        edit: upt,
        items: detailItems,
        callback: onDetailFormCallback,
    });

    // 表格列
    const detailColumns = [
        {
            title: '#',
            key: 'index',
            width: 50,
            fixed: 'left',
            align: 'center',
            render: (val, record, index) => {
                return index + 1;
            }
        },
        {
            title: '类型',
            key: 'type',
            dataIndex: 'type',
            width: 'auto',
            ellipsis: true,
            search: 'default'
        },
        {
            title: '名称',
            key: 'name',
            dataIndex: 'name',
            width: 'auto',
            ellipsis: true,
            search: 'default'
        },
        {
            title: '值',
            dataIndex: 'value',
            key: 'value',
            width: 'auto',
            ellipsis: true,
            search: 'default'
        },
        {
            title: '排序',
            dataIndex: 'sort',
            key: 'sort',
            width: 'auto',
            ellipsis: true,
            search: 'default'
        },
        {
            title: '备注',
            dataIndex: 'remark',
            width: 'auto',
            key: 'remark',
            ellipsis: true,
            search: 'default',
        },
        {
            title: '操作',
            dataIndex: 'id',
            width: 120,
            align: 'center',
            fixed: 'right',
            render: (val, row) => {
                return (
                    <div>
                        <Tooltip title="编辑">
                            <Button type="text" size="small" icon={<EditOutlined />} style={{ margin: '0 4px', color: 'blue' }} onClick={() => detailForm.isOpenDialog(row, '编辑')} />
                        </Tooltip>
                        <Tooltip title="删除">
                            <Button type="text" size="small" icon={<DeleteOutlined />} style={{ margin: '0 4px', color: 'red' }} onClick={() => detailTable.onRemove(val, undefined, onReloadDetailTable)} />
                        </Tooltip>
                    </div>
                )
            }
        }
    ];

    // 表格工具栏
    const detailTools = () => {
        return (
            <Space>
                <Tooltip title="返回">
                    <Button color="default" variant="filled" icon={<LeftCircleOutlined />} onClick={() => isOpenDialog()} />
                </Tooltip>
                <Button type="primary" onClick={() => detailForm.isOpenDialog({type: row?.type}, '新增')} >新增</Button>
                <Button type='dashed' style={{ color: 'red' }} onClick={() => detailTable.onBatchRemove(detailTable.selected)}>删除</Button>
            </Space>
        );
    }

    // 表格操作
    const detailTable = useTableDialog({
        reload: page,
        remove: del,
        batchRemove: batchDel,
        tools: detailTools,
        columns: detailColumns,
    });

    const onReloadDetailTable = () => {
        let query = {
            params: [
                {
                    field: 'parentId',
                    value: row.id,
                }
            ]
        }
        detailTable.onReload(query);
    }

    useEffect(() => {
        if (visible) {
            onReloadDetailTable();
        }
    }, [visible]);

    return (
        <>
            <CloudTable props={detailTable} />
            <FormModal props={detailForm} />
        </>
    );
};

export default DictDetail;